<template>
  <div  id="editor" class="grid-content bg-purple">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="loginbeforemsg" @click.stop="centerDialogVisible = true">
          <el-avatar > 留名 </el-avatar>
        </div>
        <el-dialog   @open="readName()"  @close="writeToStorage()"
          :visible.sync="centerDialogVisible"
          width="35%"
          center>
          <el-divider content-position="center"><p class="title">你正在进行评论操作</p></el-divider>
          <p class="tips"><span style="font-style: italic">Tip:</span>&nbsp;&nbsp;留下邮箱,如果博主能解决你的问题，会给你回复哟! </p>
          <el-form ref="form" @submit.native.prevent  label-position='left' >
            <el-form-item label="名讳" label-width="50px">
              <el-input v-model="$store.state.name" placeholder="大侠,请留下名讳..."></el-input>
            </el-form-item>
            <el-form-item label="邮箱" label-width="50px" >
              <el-input v-model="$store.state.email" placeholder="求你留下邮箱好不好,我想和你悄悄话..."></el-input>
            </el-form-item>
            <!--<el-form-item class="confirmBtn">-->
            <el-button  style="width: 100% " type="primary" @click="centerDialogVisible = false">去吐槽</el-button>
            <!--</el-form-item>-->

          </el-form>
          <div  slot="footer" class="dialog-footer">

            <el-avatar class="thirdPartylogin" :size="50" :src="wechat"></el-avatar>
            <el-avatar class="thirdPartylogin" :size="50" :src="wechat"></el-avatar>
            <el-avatar class="thirdPartylogin" :size="50" :src="wechat"></el-avatar>
            <el-divider id="bottom" style="margin: 0">三方登录只是用于快速获取昵称和邮箱</el-divider>


          </div>
        </el-dialog>
        <h2>留言板</h2>
        <p>你可以在这里吐槽生活的不易!</p>
        <p>你也可以讨论java的相关知识!</p>

      </div>
      <div id="main">
        <mavon-editor placeholder="There is no doubt that I  love Java forever" :ishljs = "true" v-model="$store.state.currentMsgValue"/>
      </div>
    </el-card>
    <el-button  class="commitMsgBtn" @click="submitMyMsg" type="primary" round>一键吐槽</el-button>
  </div>
</template>

<script>
  import  commonUtils from  '../common/commonUtils'
  export default {
    name: 'writeMsg',
    data(){
      return{
        centerDialogVisible: false,
        wechat:'https://changyan.sohu.com/mdevp/extensions/login-dialog/039/image/webchat.png'
      }
    },
    methods:{
      readName(){
        //从本地读取数据。
        var item = localStorage.getItem('session_obj')
        console.log("本地读取数据")
        if (item) {
           var parse = JSON.parse(item)
          if(parse){
            this.$store.state.name=parse.name;
            this.$store.state.email=parse.email;
            this.$store.state.avatar=parse.avatar;
          }
        }
      },
      writeToStorage(){
        console.log("本地写入数据")
        if (this.$store.state.name && this.$store.state.email) {
          var obj={
               name:this.$store.state.name,
               email:this.$store.state.email,
               avatar:this.$store.state.avatar
          }
          localStorage.setItem("session_obj",JSON.stringify(obj))
        }
      },
      submitMyMsg(){
        if(!this.$store.state.name){
          //弹出提示框。
          commonUtils.AlertErrorMsg("大侠,请先留名吧。。。")

          return;
        }
        if (!this.$store.state.currentMsgValue) {
             //弹出提示框。
          commonUtils.AlertErrorMsg("先说点什么吧")
           return;
        }
        console.log(this.$store.state.currentMsgValue);
        this.$store.dispatch('submitMyMsg');
      },

      closeNotice(){
        this.centerDialogVisible = true
      }
    }
  }
</script>

<style scoped >
  #editor{
    /*width: 50%;*/
    /*background-color: skyblue;*/
    margin-left: 10%;
    margin-right: 10%;
    height: 500px;
    position: relative;

  }

  .markdown-body{
    height: 300px;
  }

  .commitMsgBtn{
    margin-top: 5px;
    margin-left: 9%;
    margin-right: 2%;
    margin-bottom: 5px;
    width: 90%;
  }




  .loginbeforemsg {
    position: absolute;
    /*top: 165px;*/
    /*right: 15%;*/
    bottom: 0;
    left: 1%;
    z-index: 3000000;

  }

  .loginbeforemsg:hover  .el-avatar{
    border:1px solid red;
    color: indianred;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
  }


  .el-dialog .title{
    font-size: 18px;
  }
  .el-dialog .tips{
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #606266;
    margin-bottom: 10px  ;
  }

  .thirdPartylogin{
    margin-right: 20px;
  }

  #bottom{
    margin: 0;
  }
</style>
